'use client';

import React, { useState, useEffect } from 'react';
import { MessageCircle, Phone, Instagram, MapPin, Utensils, Edit3 } from 'lucide-react';
import Link from 'next/link';

// Default Details (In case LocalStorage is empty)
const defaultConfig = {
  name: "ROYAL SPICE",
  tagline: "Fine Dining & Luxury Lounge",
  logoUrl: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&q=80&w=300",
  bgUrl: "https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&q=80&w=1000",
  whatsappNumber: "919876543210",
  phoneNumber: "+919876543210",
  instagramUsername: "royalspice_official",
  locationUrl: "https://maps.google.com"
};

export default function BasicDigitalCard() {
  const [restaurant, setRestaurant] = useState(defaultConfig);

  // Load saved data from LocalStorage
  useEffect(() => {
    const savedData = localStorage.getItem('basic_card_config');
    if (savedData) {
      try {
        setRestaurant(JSON.parse(savedData));
      } catch (e) {
        console.error("Failed to parse config", e);
      }
    }
  }, []);

  return (
    <div className="relative min-h-screen w-full flex items-center justify-center p-4 bg-slate-950 font-sans text-white overflow-hidden">
      
      {/* Background Image */}
      <div 
        className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-35 scale-105 transition-all duration-700"
        style={{ backgroundImage: `url(${restaurant.bgUrl})` }}
      />
      
      {/* Dark Overlay */}
      <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-slate-950/80 to-black" />

      {/* Glassmorphism Card */}
      <div className="relative z-10 w-full max-w-sm rounded-3xl p-6 md:p-8 backdrop-blur-xl bg-white/10 border border-white/20 shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] flex flex-col items-center text-center">
        
        {/* Profile / Logo */}
        <div className="relative mb-4 group">
          <div className="absolute -inset-1 rounded-full bg-gradient-to-r from-amber-400 to-yellow-600 blur opacity-75"></div>
          <img 
            src={restaurant.logoUrl} 
            alt={restaurant.name} 
            className="relative w-28 h-28 rounded-full object-cover border-2 border-amber-400/80 shadow-xl bg-slate-900"
          />
        </div>

        {/* Brand Name & Tagline */}
        <h1 className="text-2xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-amber-400 to-yellow-500 mb-1 uppercase">
          {restaurant.name}
        </h1>
        <p className="text-xs tracking-widest text-slate-300 uppercase mb-8 font-light">
          {restaurant.tagline}
        </p>

        {/* Buttons */}
        <div className="w-full space-y-3.5">
          <a 
            href={`https://wa.me/${restaurant.whatsappNumber}?text=Hi%20${encodeURIComponent(restaurant.name)},%20I%20would%20like%20to%20place%20an%20order.`}
            target="_blank"
            rel="noopener noreferrer"
            className="w-full py-3.5 px-5 rounded-2xl bg-emerald-600/80 hover:bg-emerald-500 border border-emerald-400/30 text-white font-semibold flex items-center justify-between transition-all duration-300 shadow-lg active:scale-95"
          >
            <div className="flex items-center space-x-3">
              <MessageCircle className="w-5 h-5 text-emerald-200" />
              <span className="text-sm">Order via WhatsApp</span>
            </div>
            <span className="text-xs bg-emerald-800/60 px-2 py-1 rounded-lg text-emerald-200">Direct</span>
          </a>

          <a 
            href={`tel:${restaurant.phoneNumber}`}
            className="w-full py-3.5 px-5 rounded-2xl bg-white/10 hover:bg-white/20 border border-white/20 text-slate-100 font-medium flex items-center justify-between transition-all duration-300 shadow-md active:scale-95"
          >
            <div className="flex items-center space-x-3">
              <Phone className="w-5 h-5 text-amber-400" />
              <span className="text-sm">Call Restaurant</span>
            </div>
          </a>

          <a 
            href={restaurant.locationUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="w-full py-3.5 px-5 rounded-2xl bg-white/10 hover:bg-white/20 border border-white/20 text-slate-100 font-medium flex items-center justify-between transition-all duration-300 shadow-md active:scale-95"
          >
            <div className="flex items-center space-x-3">
              <MapPin className="w-5 h-5 text-rose-400" />
              <span className="text-sm">Locate on Map</span>
            </div>
          </a>

          <a 
            href={`https://instagram.com/${restaurant.instagramUsername}`}
            target="_blank"
            rel="noopener noreferrer"
            className="w-full py-3.5 px-5 rounded-2xl bg-white/10 hover:bg-white/20 border border-white/20 text-slate-100 font-medium flex items-center justify-between transition-all duration-300 shadow-md active:scale-95"
          >
            <div className="flex items-center space-x-3">
              <Instagram className="w-5 h-5 text-pink-400" />
              <span className="text-sm">Follow Instagram</span>
            </div>
          </a>
        </div>

        {/* Footer Accent */}
        <div className="mt-8 flex items-center justify-between w-full pt-4 border-t border-white/10 text-slate-400 text-xs">
          <div className="flex items-center space-x-1.5">
            <Utensils className="w-3.5 h-3.5 text-amber-400" />
            <span>Digital Card</span>
          </div>

          {/* Secret Admin Edit Link */}
          <Link href="/admin" className="flex items-center space-x-1 text-slate-500 hover:text-amber-400 transition">
            <Edit3 className="w-3 h-3" />
            <span>Edit Card</span>
          </Link>
        </div>

      </div>
    </div>
  );
}